<template>
  <div>
    <!-- 评论区域 -->
    <div class="common">
      <!-- 评论数 -->
      <div class="common-header">
        <span class="common-number">{{ commonPages.acount }}</span>
        <span class="common-title">评论</span>
      </div>
      <!-- 评论排序 -->
      <div class="common-middle">
        <div class="common-top">
          <ul class="common-list">
            <li class="common-bar active">
              按热度排序
              <!-- <el-icon><caret-top /></el-icon> -->
            </li>
            <li class="common-bar">
              按时间排序
              <!-- <el-icon><caret-top /></el-icon> -->
            </li>
          </ul>
        </div>
      </div>
      <!-- 发表评论框 -->
      <div class="common-area">
        <div class="common-img">
          <img class="img" src="../videoimages/noface.jpg@52w_52h.webp" alt="" />
        </div>
        <div class="common-textarea">
          <i style="width: 13px; height: 20px"></i>
          <div class="textarea-container">
            <textarea
              class="textarea-ipt"
              cols="80"
              rows="5"
              :placeholder="commonControl.root_input_text"
            ></textarea>
          </div>
          <button class="textarea-btn">
            <span class="send-btn">发表评论</span>
          </button>
        </div>
        <div class="common-smile">
          <i class="iconfont icon-biaoqing1"></i>
          <span>表情</span>
        </div>
      </div>
      <!-- 评论区 -->
      <div class="common-list" v-for="(commons, index) in commonReplies" :key="index">
        <div class="list-item">
          <div class="user-face">
            <a href="#">
              <div class="user-avatar">
                <img class="img" :src="commons.member.avatar" alt="" />
                <span class="up-identify">@</span>
              </div>
            </a>
            <div class="attention-container">
              <button class="attention-btn">关注</button>
            </div>
          </div>
          <div class="con">
            <!-- 主评论 -->
            <div class="user">
              <a class="user-name" href="" style="color: #fb7299">{{ commons.member.uname }}</a>
              <a class="user-vip" href="" style="background-color: red; color: white">
                Lv{{ commons.member?.level_info?.current_level }}
              </a>
              <!-- <span class="user-identify" style="background-color: pink; color: white">UP</span> -->
            </div>
            <p class="text">
              <!-- <span>置顶</span> -->
              {{ commons.content.message }}
            </p>
            <div class="info">
              <span class="time">
                {{ moment(commons.ctime * 1000).format('YYYY-MM-DD hh:mm:ss') }}
              </span>
              <span class="like">
                <i class="iconfont icon-dianzan1"></i>
                <span>{{ commons.like }}</span>
              </span>
              <span class="hate">
                <i class="iconfont icon-dislike"></i>
                <span>{{ commons.hate }}</span>
              </span>
              <span class="reply">回复</span>
              <div class="info-more iconfont icon-24gf-ellipsisVertical"></div>
            </div>
            <!-- 其他回复 -->
            <div class="reply-box">
              <!-- 用户头像 -->
              <div class="replay-item" v-for="(members, i) in commons.replies" :key="i">
                <div class="reply-other">
                  <a class="reply-avatar" href="">
                    <div class="reply-img">
                      <img :src="members.member.avatar" alt="" />
                      <span></span>
                    </div>
                  </a>
                  <div class="reply-con">
                    <!-- 用户名 -->
                    <a class="reply-name" href="">{{ members.member.uname }}</a>
                    <!-- vip -->
                    <a class="reply-vip" href="">
                      Lv{{ members.member.level_info?.current_level }}
                    </a>
                    <!-- 评论 -->
                    <span class="reply-res">{{ members.content.message }}</span>
                  </div>
                </div>
                <!-- 评论时间，点赞，讨厌，更多 -->
                <div class="info">
                  <span class="time">
                    {{ moment(members.ctime * 1000).format('YYYY-MM-DD hh:mm:ss') }}
                  </span>
                  <span class="like">
                    <i class="iconfont icon-dianzan1"></i>
                    <span>{{ members.like }}</span>
                  </span>
                  <span class="hate">
                    <i class="iconfont icon-dislike"></i>
                    <span>{{ members.hate }}</span>
                  </span>
                  <span class="reply">回复</span>
                  <div class="info-more iconfont icon-24gf-ellipsisVertical"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  import { useRoute } from 'vue-router'
  export default defineComponent({
    name: 'Commend',
  })
</script>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue'
  import moment from 'moment'
  import {
    commonList,
    commonPage,
    controlTool,
    memberList,
    reqVideoCommmon,
  } from '../../../api/video'
  const common = ref<Partial<commonList>>({})
  const commonPages = ref<Partial<commonPage>>({})
  const commonControl = ref<Partial<controlTool>>({})
  const commonReplies = ref<memberList[]>([])
  //评论
  async function getVideoCommon(oid: number | string, pn: number, sort: 0 | 1 | 2) {
    const videoCommons = await reqVideoCommmon(oid, pn, sort)
    common.value = videoCommons
    commonPages.value = videoCommons.page
    commonControl.value = videoCommons.control
    commonReplies.value = videoCommons.replies
  }

  // const route = useRoute()

  const props = defineProps<{
    aid: number
    bvid: string
  }>()

  onMounted(() => {
    // const aid = Number(route.query.aid)
    // const bvid = route.query.bvid
    getVideoCommon(props.aid || props.bvid, 1, 0)
  })
</script>

<style scoped>
  @import url('//at.alicdn.com/t/font_2978613_3pb3zd9wmcx.css');
</style>

<style lang="less" scoped>
  .common {
    width: 638px;
    .common-header {
      margin-top: 20px;
      width: 638px;
      height: 42px;
      .common-number,
      .common-title {
        font-size: 18px;
        margin-right: 10px;
      }
    }
    .common-middle {
      margin-bottom: 24px;
      .common-top {
        width: 638px;
        height: 37px;
        .common-list {
          display: flex;
          width: 188px;
          height: 37px;
          .common-bar {
            width: 80px;
            height: 37px;
            margin: 8px;
            font-size: 14px;
            color: #222;
            &.active {
              border-bottom: 1px solid blue;
            }
          }
        }
      }
    }
    .common-area {
      width: 854px;
      height: 109px;
      margin: 10px 0;
      padding-top: 15px;
      .common-img {
        float: left;
        width: 48px;
        height: 48px;
        margin: 7px 0 0 5px;
        .img {
          border-radius: 50%;
        }
      }
      .common-textarea {
        display: flex;
        width: 473px;
        height: 65px;
        padding: 5px 10px;
        .textarea-container {
          .textarea-ipt {
            width: 451px;
            height: 53px;
            padding: 4px 15px;
            margin-left: 18px;
            resize: none;
            border-radius: 5px;
            background-color: #f4f5f7;
            &:focus {
              outline: none;
              border: 1px solid #1890ff;
              background-color: #fff;
            }
            &:hover {
              border: 1px solid #1890ff;
              background-color: #fff;
            }
          }
        }
        .textarea-btn {
          margin-left: 10px;
          padding: 4px 30px;
          width: 38px;
          height: 63px;
          text-align: center;
          color: #fff;
          word-wrap: break-word;
          background-color: #00a1d6;
          border: 1px solid #00a1d6;
          border-radius: 5px;
          cursor: pointer;
          &:hover {
            background-color: #1890ff;
          }
          .send-btn {
            display: block;
            margin-left: -15px;
            width: 34px;
            height: 36px;
            font-size: 14px;
          }
        }
      }
      .common-smile {
        display: flex;
        justify-content: center;
        margin-left: 84px;
        padding-top: 3px;
        width: 66px;
        height: 24px;
        text-align: center;
        font-size: 12px;
        color: #99a2aa;
        line-height: 24px;
        border-radius: 5px;
        box-shadow: 0px 1px 10px 0 rgb(184, 180, 180);
        cursor: pointer;
        .iconfont {
          margin-right: 5px;
        }
      }
    }
    .common-list {
      margin-top: 24px;
      .list-item {
        display: flex;
        .info {
          position: relative;
          width: 553px;
          margin-top: 6px;
          color: #aaa;
          .time,
          .like,
          .hate,
          .reply {
            margin-right: 8px;
            cursor: pointer;
          }
          .like,
          .hate {
            &:hover {
              color: #1890ff;
            }
          }
          .reply {
            width: 34px;
            padding: 0 10px;
            &:hover {
              color: #1890ff;
              background-color: #e5e9ef;
              border-radius: 5px;
              padding: 0 10px;
            }
          }
          .info-more {
            position: absolute;
            width: 18px;
            height: 18px;
            right: 0;
            top: 0;
            cursor: pointer;
            &:hover {
              color: #1890ff;
            }
          }
        }
        .user-face {
          position: relative;
          width: 48px;
          height: 72px;
          margin-top: 24px;
          margin-left: 5px;
          margin-right: 32px;
          .user-avatar {
            width: 48px;
            height: 72px;
            .img {
              width: 48px;
              height: 48px;
              border-radius: 50%;
            }
            .up-identify {
              position: absolute;
              right: 0px;
              bottom: 25px;
              background-color: #fff;
              border-radius: 50%;
            }
          }
          .attention-container {
            .attention-btn {
              width: 48px;
              height: 24px;
              padding: 0;
              color: #fff;
              font-size: 12px;
              background-color: #00a1d6;
              border: none;
              border-radius: 4px;
              cursor: pointer;
              outline: none;
            }
          }
        }
        .con {
          border-top: 1px solid #ccc;
          padding-top: 22px;
          padding-bottom: 14px;
          .user {
            display: flex;
            width: 553px;
            padding-bottom: 4px;
            .user-name,
            .user-vip,
            .user-identify,
            .nameplate {
              margin-right: 8px;
              font-size: 12px;
              font-weight: bold;
            }

            .user-vip {
              padding: 0 4px;
              border-radius: 4px;
              transform: scale(0.95);
            }
          }
          .text {
            font-size: 14px;
            span {
              font-size: 12px;
              color: #ff81aa;
              border: 1px solid #ff81aa;
            }
          }
          .reply-box {
            width: 553px;
            .replay-item {
              padding: 10px 0;
              .reply-other {
                display: flex;
                .reply-img img {
                  width: 24px;
                  height: 24px;
                  border-radius: 50%;
                }
                .reply-con {
                  line-height: 24px;
                  padding-left: 10px;
                  // .reply-name,
                  .reply-res {
                    padding-left: 5px;
                  }

                  .reply-vip {
                    margin-left: 5px;
                    padding: 0 5px;
                    line-height: 1.2;
                    display: inline-flex;
                    justify-content: center;
                    background-color: red;
                    border-radius: 4px;
                    color: #fff;
                    transform: scale(0.8);
                  }

                  .reply-name {
                    color: #6d757a;
                    font-size: 12px;
                    font-weight: bold;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>
